<template>
    <section class="todoapp">
        <!-- 除了驼峰, 还可以使用-转换链接 -->
        <TodoHeader @addFn="addFun"></TodoHeader>
        <TodoMain :list="showList" @delFn="delFun"></TodoMain>
        <TodoFooter :list="showList" :getSel="getSel" @tabFn="tabFun" @cleanFn="cleanFun"></TodoFooter>
    </section>
</template>

<script>
// 1.0 样式引入
import './styles/base.css'
import './styles/index.css'

import TodoHeader from './components/TodoHeader'
import TodoMain from './components/TodoMain'
import TodoFooter from './components/TodoFooter'

export default {
    components: {
        TodoHeader,
        TodoMain,
        TodoFooter,
    },
    data() {
        return {
            list: JSON.parse(localStorage.getItem('ToDoList')) || [],
            getSel: 'all',
        }
    },
    methods: {
        addFun(val) {
            this.list.push({
                id: this.list.length ? this.list.at(-1).id + 1 : 100,
                name: val,
                isDone: false,
            })
        },
        delFun(id) {
            this.list = this.list.filter((item) => item.id !== id)
        },
        tabFun(zt) {
            this.getSel = zt
        },
        cleanFun() {
            this.list = this.list.filter((item) => !item.isDone)
        },
    },
    computed: {
        showList() {
            if (this.getSel === 'yes') {
                return this.list.filter((item) => item.isDone)
            } else if (this.getSel === 'no') {
                return this.list.filter((item) => !item.isDone)
            } else {
                return this.list
            }
        },
    },
    watch: {
        list: {
            deep: true,
            handler() {
                localStorage.setItem('ToDoList', JSON.stringify(this.list))
            },
        },
    },
}
</script>
